<template>
    <div class="box">
        <el-collapse accordion>
            <el-collapse-item title="数据源">
                <Item v-for="item in itemData_dataBase" :key="item.id" :itemData="item" dragClass="dataBase" />
            </el-collapse-item>
            <el-collapse-item title="数据集">
                <Item v-for="item in itemData_dataCom" :key="item.id" :itemData="item" dragClass="dataCom" />
            </el-collapse-item>
            <el-collapse-item>
                <template #title>
                    维度
                    <el-tooltip content="维度可以多选">
                        <i class="header-icon el-icon-info"></i>
                    </el-tooltip>
                </template>
                <Item v-for="item in itemData_category" :key="item.id" :itemData="item" dragClass="category" />
            </el-collapse-item>
            <el-collapse-item title="度量/数值（Y）">
                <Item v-for="item in itemData_value" :key="item.id" :itemData="item" dragClass="value" />
            </el-collapse-item>
            <el-collapse-item title="时间跨度（X）">
                <Item v-for="item in itemData_time" :key="item.id" :itemData="item" dragClass="time" />
            </el-collapse-item>
            <el-collapse-item title="特殊配置">
                <div style="margin-left: 20px">
                    <span> X轴/Y轴翻转： </span>
                    <el-switch style="margin-left: 20px" v-model="XtoY" active-text="是" inactive-text="否"> </el-switch>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import Item from './item.vue';
export default {
    name: 'DragOptionsBox',
    components: {
        Item,
    },
    data() {
        return {
            XtoY: false,

            itemData_dataBase: [
                { id: 'a1', name: '数据源_1', dragClass: 'dataBase' },
                { id: 'a2', name: '数据源_2', dragClass: 'dataBase' },
                { id: 'a3', name: '数据源_3', dragClass: 'dataBase' },
                { id: 'a4', name: '数据源_4', dragClass: 'dataBase' },
                { id: 'a5', name: '数据源_5', dragClass: 'dataBase' },
            ],
            itemData_dataCom: [
                { id: 'b1', name: '数据集_1', dragClass: 'dataCom' },
                { id: 'b2', name: '数据集_2', dragClass: 'dataCom' },
                { id: 'b3', name: '数据集_3', dragClass: 'dataCom' },
            ],
            itemData_category: [
                { id: 'c1', name: '维度_a', dragClass: 'category' },
                { id: 'c2', name: '维度_b', dragClass: 'category' },
                { id: 'c3', name: '维度_c', dragClass: 'category' },
                { id: 'c4', name: '维度_d', dragClass: 'category' },
                { id: 'c5', name: '维度_e', dragClass: 'category' },
            ],
            itemData_value: [
                { id: 'v1', name: '度量_1', dragClass: 'value' },
                { id: 'v2', name: '度量_2', dragClass: 'value' },
                { id: 'v3', name: '度量_3', dragClass: 'value' },
                { id: 'v4', name: '度量_4', dragClass: 'value' },
                { id: 'v5', name: '度量_5', dragClass: 'value' },
            ],
            itemData_time: [
                { id: 't1', name: '最近一周', dragClass: 'time' },
                { id: 't2', name: '最近一个月', dragClass: 'time' },
                { id: 't3', name: '最近三个月', dragClass: 'time' },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.box {
}
</style>
